<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <style>

    </style>
</head>
<body>
<!--<div id="app" @click="handleClick" :class="{activated: isActivated}">-->
<!--
    <div id="app" @click="handleClick" :class="[activated,activatedOne]">
-->
<div id="app" @click="handleClick" :style="[styleObj,{fontSize:'20px'}]">
hello world
</div>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            activated:"",
            activatedOne:"activatedOne",
            styleObj:{
                background:"rebeccapurple"
            }
        },
        
    methods:{
        handleClick:function () {
            this.styleObj.background = this.styleObj.background ==="rebeccapurple"?"red":"rebeccapurple"
            
        }
    }

    })














</script>
</body>
</html>